<template>
	<view class="info_top">
		<view class="w-690 info-bg-title" style="height: 265rpx;">
			<view class="left-balck d-flex align-items">
				<image src="../static/back@1x.png" @click="go_black" mode="widthFix" class="go_back"></image>
				<view class="line"></view>
				<image src="../static/home@1x.png" @click="goHome" mode="widthFix" class="go_index"></image>
			</view>
			<view class="title">设计师信息发布</view>
			<view class="right"></view>
		</view>
		<view class="w-690 content-list">
			<view class="w-650 d-flex margin-top-30">
				<view class="fabu_title">发布类型</view>
				<view class="radio_list">
					<u-radio-group v-model="radiovalue1" placement="row">
						<u-radio activeColor="#FF6400" :customStyle="{marginLeft: '15rpx',marginBottom:'15rpx'}"
							v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.id"
							@change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="w-650 d-flex align-items margin-top-30">
				<view class="fabu_title">城市选择</view>
				<view class="righttx d-flex align-items" @click="chooseCity">
					<view :class="adress == '请选择省/市' ? 'top-txt_true' : 'top-txt'">{{adress}}</view>
					<image class="qm" src="../static/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="w-650 d-flex align-items margin-top-30">
				<view class="fabu_title">户型选择</view>
				<view class="righttx d-flex align-items" @click="choose_huxing">
					<view :class="huxing_txt == '请选择' ? 'top-txt_true' : 'top-txt'">{{huxing_txt}}</view>
					<image class="qm" src="../static/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="w-650 margin-top-30 d-flex align-items justify-content-space-between">
				<view class="d-flex align-items">
					<view class="cs">输入面宽</view>
					<input type="text" class="miankuan" v-model="miankuan" />
					<view class="cs">米</view>
				</view>
				<view class="d-flex align-items">
					<view class="cs">输入进深</view>
					<input type="text" class="miankuan" v-model="jinshen" />
					<view class="cs">米</view>
				</view>
			</view>
			<view class="w-650 margin-top-30 d-flex align-items justify-content-space-between">
				<view class="d-flex align-items">
					<view class="cs">结构形式</view>
					<view class="jiegou">
						<uni-data-select v-model="value" :localdata="range" @change="change"
							:clear="false"></uni-data-select>
					</view>
				</view>
				<view class="d-flex align-items">
					<view class="cs">屋顶形式</view>
					<view class="jiegou">
						<uni-data-select v-model="value" :localdata="range" @change="change"
							:clear="false"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="w-650 margin-top-30 d-flex align-items justify-content-space-between">
				<view class="d-flex align-items">
					<view class="cs">房屋面积</view>
					<input type="text" class="miankuan" v-model="cengshu" />
					<view class="cs">m²</view>
				</view>
				<view class="d-flex align-items">
					<view class="cs">预算</view>
					<input type="text" class="miankuan" v-model="cengshu" />
					<view class="cs">元</view>
				</view>
			</view>
			<view class="w-650 margin-top-30 d-flex align-items justify-content-space-between">
				<view class="d-flex align-items">
					<view class="cs">地上层数</view>
					<input type="text" class="miankuan" v-model="cengshu" />
					<view class="cs">层</view>
				</view>
				<view class="d-flex align-items">
					<view class="cs">地下室</view>
					<view class="jiegou">
						<uni-data-select v-model="value" :localdata="range" @change="change"
							:clear="false"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="w-650 margin-top-30">
				<view class="fabu_title">案例主图 <text class="zhutu">（第一张图为封面图）</text> </view>
				<view class="zhengjian">
					<u-upload width="127rpx" height="127rpx" :fileList="fileList1" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="1">
						<image :src="src" class="shangchuanimg" v-if="avatar"></image>
						<image src="../static/upload.png" class="shangchuanimg" v-else></image>
					</u-upload>
				</view>
			</view>
			<view class="w-650 margin-top-30">
				<view class="cs">标题</view>
				<view class="">
					<textarea name="" class="xinxi_content" placeholder="请输入标题" id="" cols="30" rows="10"></textarea>
				</view>
			</view>
			<view class="w-650 margin-top-30">
				<view class="fabu_title">详情</view>
				<view class="zhengjian">
					<u-upload width="127rpx" height="127rpx" :fileList="fileList2" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="1">
						<image :src="src" class="shangchuanimg" v-if="avatar"></image>
						<image src="../static/upload.png" class="shangchuanimg" v-else></image>
					</u-upload>
				</view>
			</view>
			<view class="w-650 margin-top-30">
				<view class="">
					<textarea name="" class="xinxi_content" placeholder="请输入详情" id="" cols="30" rows="10"></textarea>
				</view>
			</view>

			<view class="liji-btn">
				<u-button color="#FF6400" @click="get_zaojia" text="确认发布"></u-button>
			</view>
		</view>
		<u-picker :show="showcity" ref="uPicker" @cancel="cancel" :columns="columns" @confirm="confirm"
			@change="changeHandler" keyName="t_name"></u-picker>
		<!-- 请选择户型 -->
		<u-picker :show="showHuxing" @cancel="showHuxing = false" :columns="columns_huxing" @confirm="confirm_huxing"
			keyName="label"></u-picker>
	</view>
</template>

<script>
	import {
		tree
	} from '@/api/citys.js'
	export default {
		data() {
			return {
				radiovalue1: 0,
				radiolist1: [{
						id: 0,
						name: '设计案例',
						disabled: false
					},
					{
						id: 1,
						name: '建房案例',
						disabled: false
					},
					{
						id: 2,
						name: '装修案例',
						disabled: false
					},
					{
						id: 3,
						name: '图纸信息',
						disabled: false
					}
				],
				showcity: false,
				adress: '请选择省/市',
				cityname: '',
				shiname: '',
				quname: '',
				shiid: '',
				shengid: '',
				columns: [],
				huxing_txt: '请选择',
				showHuxing: false,
				columns_huxing: [
					[{
						label: '南北通透',
						id: 0
					}, {
						label: '正北方',
						id: 1
					}]
				],
				value: 0,
				range: [{
						value: 0,
						text: "砖混结构"
					},
					{
						value: 1,
						text: "混凝土灌注"
					},
					{
						value: 2,
						text: "钢架结构"
					}
				],
			}
		},
		async onLoad() {
			await this.getProvinces()
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			radioChange(e) {
				console.log("选择了第几个", e);
			},
			chooseCity() {
				console.log("eeeee", this.columns);
				this.showcity = true
			},
			cancel(e) {
				this.showcity = false
			},
			confirm(e) {
				this.cityname = e.value[0].name
				this.shengid = e.value[0].id
				this.shiname = e.value[1].name
				this.shiid = e.value[1].id
				this.adress = this.cityname + '/' + this.shiname
				this.showcity = false
			},
			// 省市区
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columns[0][index].children)
					// picker.setColumnValues(2, this.columns[0][index].children[0].children)
				}
				// if (columnIndex === 1) {
				// 	console.log(e, indexs);
				// 	// picker为选择器this实例，变化第二列对应的选项
				// 	picker.setColumnValues(2, this.columns[0][indexs[0]].children[indexs[1]].children)
				// }
				console.log("columnIndex", columnIndex);
			},
			// 获取省市县接口数据
			async getProvinces() {
				var data = {
					pid: 0
				}
				await tree(data).then(res => {
					console.log("选择了第几个", res);
					if (res.code == 1) {
						this.columns[0] = res.data
						this.columns[1] = res.data[0].children
						// this.columns[2] = res.data[0].children[0].children

						this.$refs.uPicker.setColumnValues(0, this.columns[0])
						this.$refs.uPicker.setColumnValues(1, this.columns[0][0]['children'])
					}

				})
			},
			// // 选择户型
			choose_huxing() {
				this.showHuxing = true
			},
			confirm_huxing(e) {
				console.log("选择户型", e);
				this.huxing_txt = e.value[0].label
				this.showHuxing = false
			},
		}
	}
</script>

<style>
	.xinxi_content {
		width: 590rpx;
		height: 160rpx;
		background-color: #F5F5F5;
		border-radius: 12rpx;
		margin: auto;
		font-size: 24rpx;
		color: #000000;
		margin-top: 30rpx;
		padding: 20rpx;
	}

	.jiegou {
		/* width: 170rpx; */
		margin: 0 16rpx;
	}

	.miankuan {
		width: 120rpx;
		height: 64rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EEEEEE;
		opacity: 1;
		margin: 0 16rpx;
		text-align: center;
	}

	.cs {
		font-size: 28rpx;
		color: #333333;
	}

	.liji-btn {
		width: 630rpx;
		margin: auto;
		margin-top: 30rpx;
		margin-bottom: 100rpx;
	}

	.zhutu {
		font-size: 24rpx;
		color: #999999;
	}

	.zhengjian {
		margin-top: 20rpx;
	}

	.shangchuanimg {
		width: 127rpx;
		height: 127rpx;
		border: 1px solid #eee;
		display: block;
		margin: auto;
		overflow: hidden;
	}

	.qm {
		width: 18rpx;
		display: block;
		padding: 10rpx 20rpx;
		margin-left: 10rpx;
	}

	.top-txt_true {
		width: 580rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: right;
		padding-left: 10rpx;
	}

	.top-txt {
		width: 580rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: right;
		padding-left: 10rpx;
	}

	.righttx {
		width: 501rpx;
		height: 64rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EEEEEE;
		opacity: 1;
		margin-left: 16rpx;
	}

	.fabu_title {
		font-size: 28rpx;
		color: #333333;
	}

	/deep/.u-radio-group--row {
		flex-wrap: wrap;
	}

	.radio_list {
		width: 500rpx;
	}

	.fabu_title {
		font-size: 28rpx;
		color: #333333;
	}

	.content-list {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 0;
	}

	.info-bg-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.right {
		width: 174rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: normal;
		text-align: center;
		color: #FFFFFF;
	}

	.left-balck {
		width: 174rpx;
		height: 64rpx;
		border-radius: 32rpx;
		justify-content: space-around;
		border: 1px solid rgb(255, 255, 255, 0.6);
	}

	.line {
		width: 1rpx;
		height: 37rpx;
		opacity: 0.6;
		background: #FFFFFF;
	}

	.go_index {
		width: 40rpx;
		display: block;
	}

	.go_back {
		width: 40rpx;
		display: block;
	}

	.info_top {
		width: 750rpx;
		height: 434rpx;
		background: url('https://lianfan.nccpu.cn/image/info_bg.png') no-repeat;
		background-size: 100% auto;
	}

	/* end */
	page {
		/* background-color: #F7F8FB; */
	}
</style>